import React, { useEffect, useState } from "react";
import "@/layouts/Recommended.css";
import { RightOutlined } from "@ant-design/icons";
import Blank from "@/components/Recommend/Blank";
function Recommend(props: any) {
  const [counter, setCounter] = useState([]);
  const [commos, setCommos] = useState([]);
  useEffect(() => {
    setCounter(props.Inform);
    setCommos(props.commos);

  });
  return (
    <div>
      {counter &&
        counter.map((item, index) => {
          return (
            <div className="Cardstock" key={index}>
              {/* 标题部分 */}
              <div className="card_Top">
                <div className="Topleft">
                  <h2>{item.title}</h2>
                  <span>{item.span}</span>
                </div>
                <div className="Topright">
                  <div className="right_left">
                    {commos &&
                      commos.map((e, i) => {
                        return (
                          <ul key={i}>
                            <li>{e.com}</li>
                          </ul>
                        );
                      })}
                  </div>
                  <div className="right_right">
                    查看更多
                    <RightOutlined />
                  </div>
                </div>
              </div>
              {/* 主体内容 */}
              <div className="card_main">
                <div className="cama_left">
                  <Blank></Blank>
                </div>
                <div className="cama_right"></div>
              </div>
            </div>
          );
        })}
    </div>
  );
}

export default Recommend;
